<template>
	<view class="page">
		<view class="order-nav" :style="{top:BarTop + 'px',height:BarHeight + 'px',lineHeight:BarHeight + 'px'}">
			<image src="https://admin.cqycgyl.com/uploads/20250912/883b0edcde1b7b59754bbe2b6c8dd891.png" mode="" class="order-nav-img"
				@click="backNav"></image>
			达人中心
		</view>
		<view class="top-bg" :style="{height:BarTop + BarHeight + 13 + 'px'}"></view>
		<!-- 推荐二维码模块 -->
		<view class="wrap_center" :style="{marginTop:BarTop + BarHeight + 13 + 'px'}">
			<view class="income" ref="income">
				<view class="label">可提现余额</view>
				<view class="value">{{ vuex_user.userMoney || '0.00' }}</view>
				<view class="btns">
					<button class="btn" @click="navigateTo('/pages/my/withdraw')">提现</button>
					<button class="btn record" @click="navigateTo('/pages/recommend/income')">记录</button>
				</view>
				<view class="info">
					<view class="info-item">
						<view @click="navigateTo('/pages/recommend/userlist')">
							<view class="label">我的商家</view>
							<view class="value">{{ recommend_summary.recommend_user_count || 0 }}</view>
						</view>
					</view>
					<view class="info-item">
						<view>
							<view class="label">今日收入</view>
							<view class="value">{{ recommend_summary.today_income || '0.00' }}</view>
						</view>
					</view>
					<view class="info-item">
						<view>
							<view class="label">总收入</view>
							<view class="value">{{ recommend_summary.total_income || '0.00' }}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="qrcode">
				<view class="label">
					<image src="https://admin.cqycgyl.com/uploads/20250912/2aad6f73c5cf1a8304e3969687a0014c.png">
					</image>
				</view>
				<view class="arrows">
					<image src="https://admin.cqycgyl.com/uploads/20250912/3620c2de18402248427d1593f19f2e7c.png">
					</image>
				</view>

				<view class="qrcode_img_wrap">
					<image class="qrcode-img" v-if="recommend_master && recommend_master.recommend_code"
						:src="recommend_master.recommend_code" alt="二维码">
					</image>
				</view>
				<view class="vip_status" @click="navigateTo('/pages/recommend/introduce')">
					<view class="expire normal" v-if="!isExpired">
						有效期至：{{ formatExpireTime(recommend_master.expire_time) }}
					</view>
					<view class="expire out_time" v-if="isExpired">二维码已到期，请前往续费
						<image src="https://admin.cqycgyl.com/uploads/20250912/fead2670df381fbbe44bb34654ed2965.png">
						</image>
					</view>
				</view>
				<view class="save-btn" @click="saveImgToLocal">保存本地</view>
				<view class="line"></view>
				<!-- 推荐码模块 -->
				<view class="code">
					<text class="mycode">我的推荐码：</text>
					<text class="value">{{recommend_master.invite_code}}</text>
					<text class="vertical_bar"></text>
					<text class="copy-btn" @click="copyInviteCode">复制</text>
				</view>
			</view>
			<view class="rules">
				<view class="rules_wrap">
					<view class="title">达人提现规则</view>
					<view class="item">1、单笔提现金额1元至200元，建议提至微信零钱 账户2000元以上建议提至银行卡账户。</view>
					<view class="item">2、提现次数 10 次/天，提现限额 2000 元/天</view>
				</view>
			</view>
			<view class="bttom"></view>
		</view>
		<!-- 达人提现规则板块 -->

	</view>
</template>

<script>
	export default {
		data() {
			return {
				BarTop: '',
				BarHeight: '',
				recommend_summary: {
					total_users: 0,
					total_income: 0.00,
					today_income: 0.00,

				},
				recommend_master: {
					recommend_code: '',
					invite_code: '',
					expire_time: '',
					recommend_master: ""

				}
			}
		},
		computed: {
			// 检查是否过期
			isExpired() {
				if (!this.recommend_master.expire_time) return false;
				const expireDate = new Date(this.recommend_master.expire_time);
				const now = new Date();
				return now > expireDate;
			}
		},
		mounted() {

		},
		onLoad() {
			let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
			this.BarTop = menuButtonInfo.top;
			this.BarHeight = menuButtonInfo.height;
			this.loadRecommendData();
			this.loadRecommendSummary();
		},
		methods: {
			backNav() {
				uni.switchTab({
					url: '../../pages/my/index'
				})
			},
			// 加载推荐数据
			loadRecommendData() {
				this.$u.api.recommend.getRecommendMaster().then(res => {
					if (res.code == 1) {
						this.recommend_master = res.data;
					} else {
						this.$u.toast(res.msg || '获取数据失败');
					}
				}).catch(err => {
					console.error('获取推荐数据失败:', err);
					this.$u.toast('网络错误，请重试');
				});
			},
			loadRecommendSummary() {
				this.$u.api.recommend.getRecommendSummary().then(res => {
					if (res.code == 1) {
						this.recommend_summary = res.data;
					} else {
						this.$u.toast(res.msg || '获取数据失败');
					}
				}).catch(err => {
					console.error('获取推荐数据失败:', err);
					this.$u.toast('网络错误，请重试');
				});
			},
			// 页面跳转
			navigateTo(url) {
				uni.navigateTo({
					url: url,
					fail: () => {
						this.$u.toast('页面开发中，敬请期待');
					}
				});
			},

			// 分享二维码
			shareQrCode() {
				if (!this.recommend_master.recommend_code) {
					this.$u.toast('二维码未生成，请稍后再试');
					return;
				}

				// #ifdef MP-WEIXIN
				uni.showShareMenu({
					withShareTicket: true,
					menus: ['shareAppMessage', 'shareTimeline']
				});
				// #endif

				// #ifdef H5
				this.$u.toast('请长按二维码保存后分享');
				// #endif
			},

			saveImgToLocal() {
				var that = this
				uni.showLoading({
					title: '保存中...'
				})
				uni.downloadFile({
					url: that.recommend_master.recommend_code, //图片地址
					success: (res) => {
						if (res.statusCode === 200) {
							uni.saveImageToPhotosAlbum({
								filePath: res.tempFilePath,
								success: function() {
									uni.hideLoading()
									uni.showToast({
										title: "保存成功",
										icon: "none"
									});
								},
								fail: function() {
									uni.hideLoading()
									uni.showToast({
										title: "保存失败",
										icon: "none"
									});
								},
							});
						}
					}
				})
			},

			// 复制邀请码
			copyInviteCode() {
				if (!this.recommend_master.invite_code) {
					this.$u.toast('邀请码未生成，请稍后再试');
					return;
				}

				uni.setClipboardData({
					data: this.recommend_master.invite_code,
					success: () => {
						this.$u.toast('邀请码已复制到剪贴板');
					},
					fail: () => {
						this.$u.toast('复制失败，请手动复制');
					}
				});
			},

			// 格式化到期时间
			formatExpireTime(timestamp) {
				if (!timestamp) return 'N/A';
				const date = new Date(timestamp);
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0');
				const day = String(date.getDate()).padStart(2, '0');
				const hours = String(date.getHours()).padStart(2, '0');
				const minutes = String(date.getMinutes()).padStart(2, '0');
				return `${year}-${month}-${day} ${hours}:${minutes}`;
			}
		}
	}
</script>

<style scoped>
	.page {
		background-image: url("https://admin.cqycgyl.com/uploads/20250912/1c6ee49c3be463d36bca3f584bfe49cd.png");
		background-repeat: no-repeat;
	}

	.order-nav {
		width: 100%;
		text-align: center;
		position: fixed;
		z-index: 999;
		font-weight: 400;
		font-size: 36rpx;
		color: #202020;
	}

	.order-nav-img {
		width: 30rpx;
		height: 30rpx;
		position: absolute;
		left: 20rpx;
		padding: 15rpx 15rpx 15rpx 10rpx;
		z-index: 999;
	}

	.nav-sp {
		position: absolute;
		width: 100%;
		left: 0rpx;
		text-align: center;
	}

	.top-bg {
		background: url(https://admin.cqycgyl.com/uploads/20250912/63b447bb2ec2aee9d83fde360f3e4db8.png), white;
		background-repeat: no-repeat;
		background-size: cover;
		position: fixed;
		top: 0px;
		width: 100%;
		z-index: 99;
	}

	.wrap_centera {
		background-color: #F6F8F7;
	}

	/* 总收入模块 */
	.income {
		width: 93%;
		align-items: center;
		background: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 96%, #F5FFFB 100%);
		border-radius: 24rpx;
		margin: 0px auto;
		padding: 40rpx 0rpx 30rpx 0rpx;
		height: 436rpx;
		overflow: hidden;
	}

	.income .label {
		font-size: 16px;
		margin-bottom: 8rpx;
		font-weight: 400;
		font-size: 28rpx;
		color: #666666;
		text-align: center;
	}

	.income .value {
		margin-bottom: 24rpx;
		font-weight: 800;
		font-size: 56rpx;
		color: #333333;
		text-align: center;
	}

	.income .btns {
		display: flex;
		gap: 30rpx;
		justify-content: center;
		margin-bottom: 50rpx;
	}

	.income .btn {
		background: #FFDECF;
		border: none;
		border-radius: 20px;
		font-weight: 400;
		font-size: 28rpx;
		color: #F16325;
		margin: 0px;
		width: 130rpx;
		height: 60rpx;
		border-radius: 24rpx;
		line-height: 60rpx;
	}

	.income .btns .record {
		background: none;
		border: 2rpx solid #F16325;
	}

	/* 我的商家/今日收入模块 */
	.info {
		display: flex;
		justify-content: space-around;
	}

	/* .info-item {
		display: flex;
		align-items: center;
		background-color: #fff;
		border-radius: 24rpx;
		justify-content: space-between;
		padding: 30rpx;
		width: 334rpx;
		height: 152rpx;
		justify-content: flex-start;
	}

	.info-item:nth-child(1) {
		background: linear-gradient(180deg, #F5F8FF 0%, #FFFFFF 100%);
	}

	.info-item:nth-child(2) {
		background: linear-gradient(180deg, #FFF6EB 0%, #FFFFFF 100%);
	} */


	.info-item .label {
		font-weight: 400;
		font-size: 28rpx;
		color: #999999;
	}

	.info-item .value {
		font-weight: bold;
		font-size: 40rpx;
		color: #333333;
	}

	/* 推荐二维码模块 */
	.wrap_center {
		margin-top: 20rpx;
	}

	.qrcode {
		background: white;
		border-radius: 34rpx;
		margin: 20rpx 30rpx 0rpx 30rpx;
		overflow: hidden;
	}

	.qrcode .label {}

	.qrcode .label image {
		width: 414rpx;
		height: 37rpx;
		display: block;
		margin: 0px auto;
		margin-top: 44rpx;
		margin-bottom: 18rpx;
	}

	.qrcode .arrows {
		margin-bottom: 10rpx
	}

	.qrcode .arrows image {
		width: 36rpx;
		height: 36rpx;
		display: block;
		margin: 0px auto;
	}

	.wrap_center .vip_status {
		margin: 24rpx 0rpx 20rpx 0rpx;
	}

	.wrap_center .vip_status image {
		width: 22rpx;
		height: 22rpx;
		vertical-align: middle;
	}

	.qrcode .vip_status view {
		font-weight: 400;
		font-size: 24rpx;
		text-align: center;
	}

	.qrcode .normal {
		color: #999999;
	}

	.qrcode .out_time {
		color: #F24040;
	}


	.qrcode_img_wrap {
		background: #FFFFFF;
		box-shadow: 0rpx 2rpx 32rpx 2rpx rgba(122, 41, 6, 0.15);
		border: 2rpx solid #F16325;
		width: 412rpx;
		height: 412rpx;
		margin: 0px auto;
		border-radius: 34rpx;
		padding: 24rpx;
	}

	.qrcode_img_wrap .qrcode-img {
		width: 360rpx;
		height: 360rpx;
		display: block;
		margin: 0px auto
	}

	.qrcode-tip {
		text-align: center;
		font-weight: 400;
		font-size: 28rpx;
		color: #333333;
		margin-top: 40rpx;
		margin-bottom: 20rpx;
	}

	.save-btn {
		font-size: 14px;
		width: 186rpx;
		height: 64rpx;
		line-height: 64rpx;
		border-radius: 36rpx;
		border: 2rpx solid #F16325;
		margin: 0px auto;
		margin-bottom: 30rpx;
		font-weight: 400;
		font-size: 28rpx;
		color: #F16325;
		text-align: center;
	}

	.line {
		border: 2rpx solid #EFEFEF;
	}

	/* 推荐码模块 */
	.code {
		background-color: #fff;
		border-radius: 10px;
		padding: 0px 30rpx;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
	}

	.code .label {
		font-size: 28rpx;
		color: #333333;

	}

	.code .value {
		font-size: 28rpx;
		color: #333333;
		font-weight: Bold;
	}

	.vertical_bar {
		width: 0rpx;
		height: 24rpx;
		border: 2rpx solid #EFEFEF;
		margin: 0px 12rpx;
	}

	.copy-btn {
		font-weight: 400;
		font-size: 28rpx;
		color: #666666;
		text-align: center;
	}

	/* 推荐规则模块 */
	.rules {
		background-color: #fff;
		border-radius: 10px;
		margin: 20rpx 30rpx 0rpx 30rpx;
	}

	.rules .rules_wrap {
		padding: 30rpx;
	}

	.rules .title {
		font-size: 18px;
		font-weight: bold;
		margin-bottom: 10px;
	}

	.rules .item {
		font-size: 14px;
		color: #666;
		margin-bottom: 5px;
	}

	.bttom {
		height: 104rpx;
	}
</style>